body {
	font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
	background-attachment: fixed;
}

.hidden {
	display: none;
}


#container {
	min-width: 962px;
	text-align: center;
}

/******************************************** top ********************************************/
#top-panel {
	height: 32px;
	padding: 0 5px;
	text-align: left;
	-moz-user-select: -moz-none;
	margin-bottom: 5px;
}

#theme-selector {
	float: right;
	margin-top: 8px;
}

#theme-selector li {
	float: left;
	margin: 2px;
	width: 8px;
	height: 8px;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 5px;
}

#theme-selector li.current,
#theme-selector li:hover {
	width: 10px;
	height: 10px;
	margin: 1px;
	border-radius: 6px;
}

#top-toolbar {
	float: left;
	padding-left: 1em;
	margin-top: 4px;
}

#top-toolbar li {
	float: left;
	text-align: center;
	margin: 0 .5em;
	padding: 6px 10px;
	font-size: 12px;
	cursor: pointer;
	border-radius: 3px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,0.2);
}

#top-toolbar li:hover {
	background-color: rgba(255,255,255,0.3);
}

#top-toolbar li.opened {
	box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/******************************************** site ********************************************/
#site-panel {
	position: absolute;
	-moz-user-select: -moz-none;
	margin: 0 5px 0 10px;
}

/** special cases **/
#site-panel.hidefavicon .favicon {
	display: none !important;
}

#site-panel.hideblank .empty {
	opacity: 0;
}

#site-panel.hideblank .empty:hover {
	opacity: 0.2;
}

#site-panel.draging .snapshot.hover,
#site-panel.draging .snapshot.empty.hover {
	opacity: 1;
	border-color: rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.5) inset;
}

/** special cases end **/


#compact-switch-container {
	position: relative;
	text-align: left;
	margin: 5px 10px 26px 0;
	overflow: hidden;
	cursor: pointer;
}

#site-panel.compact #compact-switch-container {
	margin-bottom: 5px;
}

#site-title {
	margin-left: 22px;
}

#site-title-line {
	position: absolute;
	top: .5em;
	display: inline;
	width: 100%;
	margin-left: 10px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.site {
	float: left;
	margin: 0 10px 25px;
	position: relative;
	border-radius: 3px;
}

#site-panel.compact .site {
	margin: 5px 10px 15px;
}

.site .snapshot {
	border: 3px solid rgba(255,255,255,0.5);
	border-radius: 3px;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}

.site .snapshot.empty {
	background: url(../images/site-add.png) no-repeat 50% 50%;
	background-size: 32px 32px !important;
	cursor: pointer;
}

#site-panel.compact div.snapshot {
	display: none;
}

.site .toolbar {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 18px;
	padding-top: 3px;
	top: -21px;
	border-radius: 3px 3px 0 0;
	background-image: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2));
}

.site.hover3 .toolbar {opacity: 0.5;}
.site.hover4 .toolbar {opacity: 0.65;}
.site.hover5 .toolbar {opacity: 0.8;}
.site.hover6 .toolbar {opacity: 0.9;}
.site.hover7 .toolbar {opacity: 0.95;}

.site:hover.hover .toolbar {
	opacity: 1;
	overflow: hidden;
}

.site:hover a .snapshot {
	border-color: rgba(255,255,255,0.2);
}

.site a .snapshot:before {
	display: none;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(rgba(0,0,0,0) 80%, rgba(0,0,0,0.1));
	left: 0;
	top: 0;
}
.site:hover a .snapshot:before {
	display: block;
}

.site:hover.hover3,
.site:hover.hover4,
.site:hover.hover5,
.site:hover.hover6,
.site:hover.hover7,
.site.hover:hover,
.site:hover.hover3 a .snapshot,
.site:hover.hover4 a .snapshot,
.site:hover.hover5 a .snapshot,
.site:hover.hover6 a .snapshot,
.site:hover.hover7 a .snapshot,
.site:hover.hover a .snapshot {
	border-radius: 0 0 3px 3px;
}

#site-panel.compact .toolbar {
	display: none;
}

.site .toolbar .button {
	width: 15px;
	height: 15px;
	margin: 0 3px;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 2px;
	float: right;
	cursor: pointer;
	background: url(../images/site-toolbar.png) no-repeat scroll 0 0 transparent;
}

.site .toolbar .button:hover {
	border-color: rgba(255,255,255,0.75);
}

.site .toolbar .button.refresh {
	background-position: -45px 0;
}

.site .toolbar .button.setting {
	background-position: -30px 0;
}

.site .toolbar .button.remove {
	background-position: -15px 0;
}

.site .toolbar .button.newtab {
	float: left;
}

.site p.desc {
	font-size: 12px;
	height: 20px;
	overflow: hidden;
	text-overflow: ellipsis; /* not supported yet */
}

.site p.desc img {
	width: 16px;
	height: 16px;
	line-height: 20px;
	vertical-align: middle;
	margin: -2px 5px 0 2px;
	-moz-force-broken-image-icon: 1;
}

.site p.desc span {
	line-height: 20px;
}

#site-panel.compact .site p.desc {
	text-align: left;
}

#site-panel.compact .site:hover a {
	text-decoration: underline;
}

/******************************************** todo ********************************************/
#todo-panel {
	position: absolute;
	font-size: 14px;
	width: 250px;
	margin: 10px 10px 0 5px;
}

#todo-holder {
	position: relative;
}

#todo-input {
	margin: 5px 10px 15px;
	padding: .5em .2em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	height: 3.5em;
}

#todo-input.init {
	height: 1.5em;
	opacity: 0.5;
}

#todo-input {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(0,0,0,0.2);
}

#todo-input:focus {
	background-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

#todo-input:-moz-placeholder {
	color: #ccc;
}

#todo-list {
	margin: 0 10px;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 4px;
	text-align: left;
}

#todo-list:empty {
	display: none;
}

#todo-list li {
	position: relative;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	padding: 1em;
	opacity: 0.9;
}

#todo-list li:hover {
	opacity: 1;
}

#todo-list li:first-child {
	border-top: none;
}
#todo-list li:last-child {
	border-bottom: none;
}

#todo-list li p {
	line-height: 1.5;
	word-wrap: break-word;
	cursor: default;
}

#todo-list .toolbar {
	position: absolute;
	width: 100%;
	height: 16px;
	left: 0;
	top: 1px;
	background: transparent;
}

#todo-list .button {
	width: 16px;
	height: 16px;
	float: right;
	cursor: pointer;
	margin: 0 2px 0 8px;
}

#todo-list .button.done {
	background: url(../images/button-done.png) no-repeat scroll 0 0 transparent;
}

#todo-list .button.star {
	background: url(../images/star.png) no-repeat scroll 0 0 transparent;
}

#todo-list .button.nostar{
	background: url(../images/star-gray.png) no-repeat scroll 0 0 transparent;
}

#todo-list li .button.done {
	opacity: 0;
}

#todo-list li:hover .button.done {
	opacity: .5;
}

#todo-list li .button.done:hover {
	opacity: 1;
}

#todo-panel.hide {
	width: 16px;
}


#todo-panel.hide #todo-input,
#todo-panel.hide #todo-list {
	display: none;
}


/** switch **/
#compact-switch,
#todo-switch {
	width: 0;
	height: 0;
	position: absolute;
	border-top: 10px solid rgba(0,0,0,0.3);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	top: 3px;
	left: 5px;
	cursor: pointer;
}

#site-panel.compact #compact-switch,
#todo-panel.hide #todo-switch {
	border-left: 10px solid rgba(0,0,0,0.3);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	top: 2px;
}
/** switch end **/



.dragbox {
	position: absolute !important;
	opacity: .25 !important;
	width: 150px !important;
	height: 93px !important;
	cursor: move !important;
	background-color: black;
}


